<template>
  <div class="app-container">
    <el-row>
      <el-button size="small" @click="clickAddCategory" type="primary">添加分类</el-button>
    </el-row>
    <el-table
      v-loading.body="listLoading"
      ref="multipleTable"
      :data="productCategory"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="name"
        label="分类名称">
      </el-table-column>
      <el-table-column
        prop="views_count"
        label="浏览次数">
      </el-table-column>
      <el-table-column
        label="操作"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary" @click="clickEditCategory(scope.$index)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteProductCategory">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <product-category-create-or-update
      :title="title" 
      :form="form"
      :dialogFormVisible="dialogFormVisible"
      :operation="operation"
      @cancelDialogFormVisible="cancelDialog"
      ></product-category-create-or-update>
  </div>
</template>

<script>
import { _getProductCategory } from '@/api/product'
import ProductCategoryCreateOrUpdate from './productcategorycreateorupdate'
export default {
  components: {
    ProductCategoryCreateOrUpdate
  },

  methods: {
    fetchData() {
      // 获取商品分类数据
      _getProductCategory()
        .then(res => {
          const productCategory = res.data
          this.allCategoryNameTid = this._initAllCategoryNameTid(productCategory)
          this.form.options = this.allCategoryNameTid
          this.productCategory = productCategory
          this.listLoading = false
        })
    },
    // 收集商品分类的name和tid，创建、修改分类选择上级分类时使用
    _initAllCategoryNameTid(productCategory) {
      const allCategoryNameTid = []
      productCategory.forEach((item) => {
        const categoryItem = {}
        categoryItem.label = item.name
        categoryItem.tid = item.tid
        allCategoryNameTid.push(categoryItem)
      })
      return allCategoryNameTid
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 点击编辑商品分类项目
    clickEditCategory(index) {
      this.dialogFormVisible = true
      this.title = '编辑分类'
      this.categoryIndex = index
      this.form = this.productCategory[index]
      this.form.options = this.allCategoryNameTid
      this.operation = 'updateCategory'
    },
    // 点击添加分类
    clickAddCategory() {
      this.dialogFormVisible = true
      this.initForm()
      this.title = '添加分类'
      this.operation = 'createCategory'
    },
    initForm() {
      this.form = {
        name: '',
        cover_image_url: '',
        views_count: 0,
        cover_image_from: 0,
        status: 0,
        sort: 1,
        parent_tid: 0,
        options: this.allCategoryNameTid
      }
    },
    // 删除商品分类项目
    deleteProductCategory() {
      this.$confirm('确定要删除该分类？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭对话框
    cancelDialog() {
      this.dialogFormVisible = false
      this.fetchData()
    }
  },

  mounted() {
    this.fetchData()
  },

  data() {
    return {
      listLoading: true,
      filterText: '',
      productCategory: [],
      dialogFormVisible: false,
      title: '',
      allCategory: [],
      operation: '',
      form: {
        name: '',
        shop_tid: 1,
        sort: 1,
        status: 1
        // cover_image_url: '',
        // views_count: 0,
        // cover_image_from: 1,
        // status: 1,
        // allCategory: [],
        // parent_tid: 0
      }
    }
  }
}
</script>

